import React, { useState, useEffect, useRef } from 'react'
import { Input, Modal, Button, Radio } from 'antd';
import type { RadioChangeEvent } from 'antd';
import { useDispatch, useSelector } from 'react-redux';
import { setIsGroup, setLabelLook } from '../../../store/module/store'
import {addTag } from '../../../request/api'
import './label.css'
import Table2 from './Table2'

export default function label() {
  const dispatch = useDispatch()
  const [name, setName] = useState<string>('')


  //获取分组列表
  const get_group = async () => {
    setName('')
    dispatch(setIsGroup())
  }

  //检索
  const search = async () => {
    dispatch(setLabelLook(name))
    dispatch(setIsGroup())
  }

  //添加标签
  const [lobelName, setLobalName] = useState<string>('')
  const [describe, setDescribe] = useState<string>('')
  //弹出对话框
  const [isModalOpen, setIsModalOpen] = useState(false);
  const showModal = () => {
    setIsModalOpen(true);

  };
//确定添加标签
  const handleOk = () => {
    if(lobelName==''||describe=='' || statue_btn=='' || value==''){
      return alert('请填写完整')
    }
    setIsModalOpen(false);
    addlobel()
  };
//取消添加标签
  const handleCancel = () => {
    setIsModalOpen(false);
    setValue('')
    setStatue_btn('')
    setLobalName('')
    setDescribe('')
  };

  //单选框
  const [value, setValue] = useState('');

  const onChange = (e: RadioChangeEvent) => {
    setValue(e.target.value);
  };

  //添加标签状态
  const [statue_btn, setStatue_btn] = useState<string>('')
  const upStatue_btn = (value: any) => {
    setStatue_btn(value)
  }

//添加标签数据
const addlobel=async()=>{
  const res=await addTag({name:lobelName,describe:describe, statue:statue_btn, color: value})
  if(res.code===200){
    handleCancel()
    dispatch(setIsGroup())
  }
}




  return (
    <div>
      <div className='all_top'>
        <div className='top'>
          <Input size="large" placeholder="标签名称" prefix='姓名：'
            style={{ margin: '0.35rem', width: '5.5rem', borderRadius: '0', fontSize: '0.22rem' }} value={name} onChange={(event) => {
              setName(event.target.value)
            }} />
        </div>
        <div className='top2'>
          <Button style={{ borderRadius: '0', marginLeft: '0.3rem', fontSize: '0.25rem', padding: '0.35rem', marginBottom: '0.4rem' }}
            onClick={() => {
              search()
            }}
          >检索</Button>
          <Button style={{ borderRadius: '0', marginLeft: '0.3rem', fontSize: '0.25rem', padding: '0.35rem', marginBottom: '0.4rem' }}
            onClick={() => {
              get_group()
            }}
          >重置</Button>
          <Button color="danger" variant="outlined" style={{ borderRadius: '0', marginLeft: '0.3rem', fontSize: '0.25rem', padding: '0.35rem', marginBottom: '0.4rem' }}
            onClick={() => {
              showModal()
            }}
          >新建标签</Button>
        </div>
      </div >
      <div className='table'>
        <Table2></Table2>
      </div>
      <div>
        <Modal title="新建标签" open={isModalOpen} onOk={handleOk} onCancel={handleCancel}
          footer={[
            <Button key="submit" onClick={handleCancel}>
              取消
            </Button>,
            <Button key="back" type="primary" onClick={handleOk}>
              确定
            </Button>
          ]}
        >
          <div className='modal'>
            <p>名称： <input type="text" value={lobelName}
              onChange={(e) => {
                setLobalName(e.target.value)
              }} /></p>
            <p>描述： <input type="text" value={describe}
              onChange={(e) => {
                setDescribe(e.target.value)
              }} /></p>
            <div>
              <Radio.Group onChange={onChange} value={value}>
                <Radio value='red'><button style={{
                  border: '1px solid red',
                  color: 'red'
                }}>标签</button></Radio>
                <Radio value='blue'><button style={{
                  border: '1px solid blue',
                  color: 'blue'
                }}>标签</button></Radio>
                <Radio value='green'><button style={{
                  border: '1px solid green',
                  color: 'green'
                }}>标签</button></Radio>
                <Radio value='purple'><button style={{
                  border: '1px solid purple',
                  color: 'purple'
                }}>标签</button></Radio>
              </Radio.Group>
            </div>
            <p>状态：
              <button
                style={{
                  border: statue_btn == '启用' ? '1px solid red' : '',
                  color: statue_btn == '启用' ? 'red' : '',
                  fontSize: '0.3rem'
                }}
                onClick={() => {
                  upStatue_btn('启用')
                }}>启用</button>
              <button
                style={{
                  border: statue_btn == '禁用' ? '1px solid red' : '',
                  color: statue_btn == '禁用' ? 'red' : '',
                  fontSize: '0.3rem'
                }}
                onClick={() => {
                  upStatue_btn('禁用')
                }}>禁用</button>
            </p>
          </div>
        </Modal>
      </div>
    </div>
  )
}


